[React] img 태그의 이미지를 추가하는 방법 및 예제 알아보기

React(리액트)에서 템플릿 파일 및 컴포넌트에 이미지를 추가하는 방법에 대하여 알아봅니다. react에서는 이미지를 추가하는 경우 두 가지 방법으로 구분할 수 있습니다.

i. import를 사용하는 방법
ii. require()를 사용하는 방법

먼저 import를 사용하는 방법부터 알아보고 그 아래에 require()를 사용해보겠습니다.

# React 이미지 img 태그 추가하는 방법

VueJS나 AngularJS만 사용했다면 React 프레임워크의 이미지 추가 방식이 기존과 달라 생소할 수 있습니다. 앞에 언급한 것 처럼 먼저 import를 사용한 방법입니다.

! import를 사용하여 이미지 추가하기

React는 아래처럼 import를 사용하여 모듈이나 파일을 추가하듯 이미지를 추가할 수 있습니다.

import <사용할 이름> from <이미지 파일 경로>;


간단하게 예를들면 만약 testA.png라는 이미지를 추가해야 하는 경우 아래와 같이 먼저 import를 사용하여 선언합니다.

이제 imgA라는 이름으로 이미지가 추가되었습니다. 이를 jsx 등의 템플릿에 아래와 같이 추가하여 이미지를 불러오게 됩니다. imgA는 변수이므로 따옴표가 아닌 {}를 사용합니다.

만약 width, height 및 alt 어트리뷰트가 함께 있다면 아래와 같이 예제코드를 작성할 수 있을 것입니다.

! require()를 사용하여 이미지 추가하기

다음으로 require()를 사용하는 방법입니다. 먼저 간단한 사용 방법입니다.

require(이미지 파일 경로)


import와 비교해보면 미리 선언하지 않아도 되는 장점이 있습니다. 만약 위와 동일한 경로의 testA라는 파일을 추가한다면 아래와 같이 require()를 사용합니다.

이 방법 역시 매우 간단합니다.

여기까지 react에서 이미지를 추가하는 방법에 대하여 알아봤습니다.